<template>
	<view>
		<view v-if="isShowType" class="list flex align-center">
			<text>售后类型：{{type}}</text>
		</view>
		<picker v-else @change="PickerChangeType" :value="indexType" :range="pickerType">
			<view class=" list flex align-center justify-between">
				<text>售后类型:{{indexType>-1?pickerType[indexType]:''}}</text>
				<view class="lg text-gray cuIcon-right"></view>
			</view>
		</picker>
		<view v-if="isShowType" class="margin-top list flex align-center">
			<text>退款金额</text>
			<input placeholder="请输入退款金额（最多可退199.5元）" v-model="amount" />
		</view>
		<picker @change="PickerChange" :value="index" :range="picker">
			<view class=" list flex align-center justify-between">
				<text v-if="isShowType">退款原因:{{index>-1?picker[index]:''}}</text>
				<text v-else>{{indexType>-1?pickerType[indexType]:'换货'}}原因:{{index>-1?picker[index]:''}}</text>
				<view class="lg text-gray cuIcon-right"></view>
			</view>
		</picker>
		<view class="textarea margin-top">
			<textarea maxlength="-1" placeholder="请输入说明..." v-model="return_reamrk"></textarea>
		</view>
		<view v-if="isShowUpload" class="upload">
			<text class="upload-title">上传凭证</text>
			<view class="upload-con flex align-center justify-between">
				<view class="upload-item">
					<view class="bg-img" @tap="ViewImage" v-if="imgList[0]" :data-url="imgList[0]">
						<image class="solidss-img" :src="imgList[0]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
				<view class="upload-item">
					<view class="bg-img" @tap="ViewImage" v-if="imgList[1]" :data-url="imgList[1]">
						<image class="solidss-img" :src="imgList[1]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="1">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
				<view class="upload-item">
					<view class="bg-img" v-if="imgList[2]" @tap="ViewImage" :data-url="imgList[2]">
						<image class="solidss-img" :src="imgList[2]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="2">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex align-center justify-center">
			<view @tap='payTim()'>提交</view>
		</view>
	</view>
</template>

<script>
	var md5 = require('@/components/md5.js');
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				index: -1,
				indexType: -1,
				picker: ['不想买了', '质量问题', '快递问题'],
				pickerType: ['换货', '退货'],
				imgList: [],
				type: '',
				isShowUpload: true,
				isShowType: false,
				amount: 0,
				order_id: '',
				order_goods_id: '',
				return_reamrk: '',
				returnResult: '',
				returnType: '',
				imgUrlList: '',
			}
		},
		onLoad(opt) {
			if (opt.type) {
				this.type = opt.type
				if (this.type == '退款') {
					this.isShowUpload = false
					this.isShowType = true
				}
			}

			if (opt.amount) {
				this.amount = opt.amount
			}
			if (opt.order_id) {
				this.order_id = opt.order_id
			}
			if (opt.order_goods_id) {
				this.loadResult()
				this.order_goods_id = opt.order_goods_id

			}
			console.log("applyReturn:" + this.type)

		},
		methods: {
			payTim() {
				if (this.isShowType) {
					this.postReturnOrderAmount()
				} else {
					this.postReturnOrder()
				}
			},
			postReturnOrder() {
				if (this.return_reamrk == '') {
					uni.showToast({
						title: '请输入原因'
					})
					return;
				}
				if (this.returnType == '' || this.type == '') {
					uni.showToast({
						title: '请选择售后类型'
					})
					return;
				}
				uni.showLoading({
					title: '上传中...'
				});
				// for(var i=0;i<this.imgList.length;i++){
				// 	this.urlToBase64(this.imgList[i])
				// }
				uni.hideLoading();
				var dataTemp = {
					return_type: this.returnType == '换货' ? 2 : 1,
					return_amount: this.amount,
					return_result: this.returnResult,
					return_reamrk: this.return_reamrk,
					img_list: this.imgUrlList

				}
				console.log('applyReturn dataTemp:' + JSON.stringify(dataTemp))
				api.post({
					url: 'UserOrder/PostReturnOrderGoodsAdd?order_goods_id=' + this.order_goods_id,
					data: dataTemp,
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							uni.showToast({
								title: '提交成功'
							})
							uni.navigateTo({
								url: '/module/my/myOrder/myOrder'
							})
						}
					}
				});
			},
			postReturnOrderAmount() {
				if (this.returnResult == '') {
					uni.showToast({
						title: '请输入原因'
					})
					return;
				}
				uni.showLoading({
					title: '上传中...'
				});
				uni.hideLoading();
				var dataTemp = {
					return_type: 1,
					return_amount: this.amount,
					return_result: this.returnResult,
					// return_reamrk:this.return_reamrk,
					// img_list:[{img_url:''}]

				}
				console.log('order_id:' + this.order_id + ' applyReturn dataTemp:' + JSON.stringify(dataTemp))
				// uni.request({
				// 	url:'https://api.jiangyikou.neetao.cn/api/UserOrder/PostReFundOrderGoodsAdd?order_id='+this.order_id,
				//     method:'POST',
				// 	header:{
				// 		// 'Content-Type': 'application/json; charset=utf-8',
				// 		// 'Content-Type': 'application/x-www-form-urlencoded',
				// 		'content-type':'application/json; charset=utf-8',
				// 	},
				// 	data:dataTemp,
				// 	success:data => {
				// 		console.log(JSON.stringify(data));
				// 		if (data.ErrCode == 0) {

				// 		}
				// 	}

				// })	
				api.post({
					url: 'UserOrder/PostReFundOrderGoodsAdd?order_id=' + this.order_id,
					data: dataTemp,
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							uni.showToast({
								title: '提交成功'
							})
							uni.navigateTo({
								url: '/module/my/myOrder/myOrder'
							})
						}
					}
				});
			},
			loadResult: function() { //退换货原因
				api.get({
					url: 'UserOrder/GetWebsiteDetailList',
					success: data => {
						console.log('222' + JSON.stringify(data));
						if (data.ErrCode == 0) {
							var temp = data.Response
							this.picker = [];
							for (var i = 0; temp.length; i++) {
								this.picker = this.picker.concat([temp[i].title])
							}

						}
					}
				});
			},
			// 获取图片信息
			urlToBase64: function(url) {
				// #ifdef MP-WEIXIN
				wx.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => {
						//成功的回调
						uni.showLoading({
							title: '上传中...'
						});
						this.upLoadPic(res.data)
						// this.largeList.autograph = 'data:image/png;base64,' + res.data;//拼接后返回
					},
					complete: e => {
						console.log('urlToBase64:' + JSON.stringify(e))
					}
				});
				// #endif

				// uni.request({
				// 	url: url,
				// 	method: 'GET',
				// 	responseType: 'arraybuffer',
				// 	success: res => {
				// 		let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				// 		this.upLoadPic(base64)

				// 	}
				// });
			},
			upLoadPic: function(item) {
				api.post({
					url: 'User/UploadImage',
					data: {
						image: item
					},
					success: data => {
						uni.hideLoading();
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.imgUrlList += 'https://api.jiangyikou.neetao.cn' + data.Response.imgurl + ","
						}
					}
				});
			},
			PickerChange: function(e) {
				this.index = e.detail.value
				console.log(this.picker[this.index])
				this.returnResult = this.picker[this.index]
			},
			PickerChangeType: function(e) {
				this.indexType = e.detail.value
				console.log(this.pickerType[this.indexType])
				this.returnType = this.pickerType[this.indexType]
				if (this.returnType == '仅退款') {
					this.isShowUpload = false
				} else {
					this.isShowUpload = true
				}
			},
			ViewImage: function(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage: function() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log('ChooseImage:' + res.tempFilePaths[0])
						this.urlToBase64(res.tempFilePaths[0])
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			DelImg: function(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		width: 100%;
		height: 100upx;
		background-color: #ffffff;
		border: solid 1upx #dddddd;
		position: fixed;
		bottom: 0;
	}

	.bottom>view {
		width: 361upx;
		height: 69upx;
		background-color: $btn-bground;
		border-radius: 34upx;
		border: solid 1upx $btn-bground;
		text-align: center;
		line-height: 69upx;
		color: #fff;
		font-size: 28upx;
	}

	.upload-item .close {
		position: absolute;
		top: 0;
		right: 0;
	}

	.upload-item {
		position: relative;
	}

	.upload-item image {
		background-color: #fff;
		position: absolute;
		top: 0;
	}

	.solidss-img {
		width: 218upx;
		height: 163upx;
	}

	.upload-con {
		margin-top: 20upx;
	}

	.upload {
		padding: 20upx;
		box-sizing: border-box;
	}

	.upload-title {
		font-size: 26upx;
		color: #666666;
	}

	.solidss>text:nth-child(1) {
		font-size: 70upx;
		color: #cccccc;
		line-height: 50upx;
	}

	.solidss>text:nth-child(2) {
		font-size: 24upx;
		color: #cccccc;
		margin-top: 14upx;
	}

	.solidss {
		width: 218upx;
		height: 163upx;
		background-color: #ffffff;
		border: dashed 1upx #cccccc;
	}

	.textarea {
		padding: 20upx;
		box-sizing: border-box;
		background-color: #fff;
		height: 210upx;
	}

	.textarea textarea {
		font-size: 26upx;
		height: 170upx;
		width: 100%;
	}

	.list input {
		margin-left: 48upx;
		width: 500upx;
		font-size: 28upx;
	}

	.list text:nth-child(1) {
		font-size: 28upx;
		color: #000000;
	}

	.list {
		height: 86upx;
		background-color: #ffffff;
		padding: 0 20upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #ddd;
	}
</style>
